<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#app{
			width: 1000px;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script></script>
	<body>
		<p style="color: red;">题目：计算百钱百鸡问题，即公鸡5元1只，母鸡3元1只，小鸡1元3只，用100元刚好买100只鸡。请问有几种方案，分别输出来</p>		
		<div id="app">
			<h2>总共有{{geteag}}种方案</h2>
			<div class="eags" v-for="eag, index in eags">
				<h2>{{gettab(index)}}</h2>
				<img v-for="a in eag.big" src="" alt="">
				<br>
				<img v-for="a in eag.middle" src="" alt="">
				<br>
				<img v-for="a in eag.small" src="" alt="">
			</div>
		</div>
		<script>
			const app = new Vue({
				el:'#app',
				data:{	
					count: 1,
					eags:[]
				},
				methods:{
					gettab(index){
						return '方案' + String(index+1) +  ':公鸡' + this.eags[index].big + '只,母鸡' + this.eags[index].middle + '只,小鸡' + this.eags[index].small + '只'
					}
				},
				computed: {	
					geteag(){	
						for(x=0;x<21;x++){
							for(y=0;y<33;y++){
								let z = 100-x-y
								if(z>=0 && 5*x+3*y+z/3==100){
									console.log(x, y, z)
									let a = {}
									a.big = x
									a.middle = y
									a.small = z
									this.eags.push(a)
								}
							}
						}
						return this.eags.length
					}
					
				}
			})
			
		</script>
	</body>
</html>




